import Header from "./Header/header";
import React, { useState, useCallback, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { loginInfo } from "../../interfaces";
import "./My.css"
import images from './img/images.js'
const My = () => {
    const Navigate = useNavigate()
    // 示例用户ID (可以是动态获取的)
    const [userId, setUserId] = useState();
    // 处理ID显示的函数 账号名称隐藏
    const displayUserId = (id) => {
        if (id.length < 3) return id; // 如果ID不足3个字符，直接显示
        // 提取第一个、最后一个字符，中间用*代替
        const firstChar = id.charAt(0);
        const lastChar = id.charAt(id.length - 1);
        return `${firstChar}*${lastChar}`;
    };
    const handleHelp = () => {
        Navigate('/help')
    }
    const getLoginInfo = useCallback(async () => {
        // 并发请求
        await [loginInfo(), loginInfo()];
    }, [])
    useEffect(() => {
        const user = localStorage.getItem('user')
        console.log(user);
        if (user) {
            setUserId(displayUserId(user))
        } else {
            setUserId('游客')
        }
    }, [])
    return (
        <>
            <div className='AllBox'>
                <div style={{ height: '60px' }}>
                    <Header />
                </div>

                <div className='titleStyle'>
                    <span>个人中心</span>
                    <span>
                        <img src={images.img1} alt="" className='iconStyle' />
                    </span>
                </div>

                <div className='userBox'>
                    <div>
                        <img src={images.img1} alt="" className='TouXiang' />
                    </div>
                    {/* 添加用户ID显示 */}
                    <div className="userIdStyle">
                        {/* <p>{displayUserId(userId)}</p> */}
                        {localStorage.getItem('access_token') ? (
                            <p onClick={getLoginInfo}>{userId}</p>)
                            : <p onClick={() => { Navigate('/login') }}>登录</p>}
                    </div>
                </div>

                <div className='ZiLiaoBox'>
                    <div className='fistBox' onClick={() => Navigate('/vpcc')}>
                        <div>
                            <img src={images.img1} alt="" className='Ziliao' />
                            <span>个人材料</span>
                        </div>
                        <div>
                            <img src={images.img2} alt="" className='JianTou' />
                        </div>
                    </div>
                    <hr />
                    <div className='fistBox'>
                        <div>
                            <img src={images.img3} alt="" className='Ziliao' />
                            <span>我的投诉</span>
                        </div>
                        <div>
                            <img src={images.img2} alt="" className='JianTou' />
                        </div>
                    </div>
                    <hr />
                    <div className='fistBox' onClick={() => handleHelp()}>
                        <div>
                            <img src={images.img6} alt="" className='Ziliao' />
                            <span>帮助中心</span>
                        </div>
                        <div>
                            <img src={images.img2} alt="" className='JianTou' />
                        </div>
                    </div>
                    <hr />
                    <div className='TwoBox'>
                        <div>
                            <img src={images.img5} alt="" className='Ziliao' />
                            <span>消息提醒</span>
                        </div>
                        <div>
                            <img src={images.img2} alt="" className='JianTou' />
                        </div>
                    </div>
                    <hr />
                    <div className='TwoBox' onClick={() => { Navigate('/setup') }}>
                        <div>
                            <img src={images.img4} alt="" className='Ziliao' />
                            <span>设置</span>
                        </div>
                        <div>
                            <img src={images.img6} alt="" className='JianTou' />
                        </div>
                    </div>
                </div>
            </div>

        </>
    )
}
export default My;